<template>
	<div id="basicInformation">
		<btnListPage
			:parentData="parentData"
			:userInfo="userInfo"
			:btnPower="btnPower"
			@parentRefresh="refresh"
		></btnListPage>
		<el-descriptions
			:title="`${$t('member.summary_info')}`"
			:column="4"
			style="padding-top: 10px;"
		>
			<el-descriptions-item :label="`${$t('common.member_number')}`">
				{{ userInfo.userName || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('common.belong_merchant')}`">
				{{ userInfo.merchantName || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('common.number_type')}`">
				{{ typeFilter(userInfo.accountType, 'accountType') }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('common.account_status')}`">
				<!-- 清算逻辑 -->
				<el-tag
					v-if="
						userInfo.liquidationStatus === 1 ||
							userInfo.liquidationStatus === 2
					"
					size="mini"
					type="danger"
					style="margin-right:10px"
				>
					{{ $t('common.liquidation_completed') }}
				</el-tag>
				<span v-else>
					<el-tag
						v-if="
							userInfo.loginLockStatus === 0 &&
								userInfo.gameLockStatus === 0 &&
								userInfo.paymentLockStatus === 0
						"
						size="mini"
						type="success"
					>
						{{ $t('common.account_status_normal') }}
					</el-tag>
					<el-tag
						v-if="userInfo.gameLockStatus === 1"
						size="mini"
						style="margin-right:10px"
					>
						{{ $t('common.game_lock_status') }}
					</el-tag>
					<el-tag
						v-if="userInfo.paymentLockStatus === 1"
						size="mini"
						type="warning"
						style="margin-right:10px"
					>
						{{ $t('common.account_lock_status') }}
					</el-tag>
					<el-tag
						v-if="userInfo.loginLockStatus === 1"
						size="mini"
						type="danger"
						style="margin-right:10px"
					>
						{{ $t('common.login_lock_status') }}
					</el-tag>

					<el-tag
						v-if="userInfo.stopStatus === 1"
						size="mini"
						type="danger"
						style="margin-right:10px"
					>
						{{ $t('common.account_stop') }}
					</el-tag>
				</span>
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.belong_club')}`">
				{{ userInfo.clubName || '-' }}
			</el-descriptions-item>
			<el-descriptions-item
				:label="`${$t('member.first_deposit_date_time')}`"
			>
				{{ userInfo.firstDepositDatetime || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.first_deposit')}`">
				{{ handleCurrency(userInfo.currency) }}
				{{ handleNumber(userInfo.currency, userInfo.firstDeposit) }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('common.business_model')}`">
				{{ mappingBusinessModel(userInfo.businessModel) || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.offline_days')}`">
				{{ handelDayNum(userInfo.lastLoginDatetime) }}
				<span v-if="userInfo.lastLoginDatetime">
					{{ $t('member.day') }}
				</span>
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.register_ip')}`">
				{{ userInfo.registerIp || '-' }}
				<!-- <span v-if="userInfo.ipWindControlName" class="redColor">
					({{ $t('common.risk_control_level') }}：{{
						userInfo.ipWindControlName
					}})
				</span>
				<span v-else class="redColor">
					({{ $t('common.risk_control_level') }}：{{
						$t('member.nothing')
					}})
				</span> -->
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('common.register_time')}`">
				{{ userInfo.createdAt || '-' }}
			</el-descriptions-item>
			<el-descriptions-item
				:label="`${$t('member.last_login_date_time')}`"
			>
				{{ userInfo.lastLoginDatetime || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.registration_end')}`">
				{{
					typeFilter(userInfo.registerDeviceType, 'deviceType') || '-'
				}}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('agent.total_agent_account')}`">
				{{ userInfo.topProxyName || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('common.top_agent')}`">
				{{ userInfo.parentProxyName || '-' }}
			</el-descriptions-item>
			<!-- <el-descriptions-item
				:label="`${$t('member.number_of_conversions')}`"
			>
				{{ userInfo.transforNum }}{{ $t('member.second') }}
			</el-descriptions-item> -->
			<el-descriptions-item label="转代次数">
				{{
					!isNaN(userInfo.transforNum)
						? `${userInfo.transforNum}次`
						: '-'
				}}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.credit_rating')}`">
				{{ userInfo.creditLevel === null ? '-' : userInfo.creditLevel }}
			</el-descriptions-item>
			<!-- <el-descriptions-item :label="`${$t('member.invitation_code')}`">
				{{ userInfo.invitationCode || '-' }}
			</el-descriptions-item> -->
			<el-descriptions-item label="安全校验">
				{{ checkTypes[userInfo.checkType] || '-'}}
			</el-descriptions-item>
		</el-descriptions>
		<el-divider></el-divider>
		<el-descriptions
			:title="`${$t('member.personal_data')}`"
			:column="1"
			:colon="false"
		>
			<el-descriptions-item>
				<el-row>
					<el-col :span="3" class="show-avatar-content">
						<el-avatar
							shape="square"
							fit="cover"
							:src="userInfo.topImagesUrl"
							:size="80"
							class="show-avatar"
						></el-avatar>
					</el-col>
					<el-col :span="20">
						<el-descriptions :column="3">
							<!-- <el-descriptions-item
								:label="`${$t('common.name')}`"
							>
								<span
									v-if="btnPower.includes(1)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else class="personal-show-info">
									{{ userInfo.realName || '-' }}
								</span>
							</el-descriptions-item> -->
							<el-descriptions-item
								:label="`${$t('member.nickname')}`"
							>
								<span
									v-if="btnPower.includes(8)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else>
									{{ userInfo.nickName || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.gender')}`"
							>
								<span
									v-if="btnPower.includes(2)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else class="personal-show-info">
									{{
										typeFilter(
											userInfo.gender,
											'genderType'
										)
									}}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.phone_number')}`"
							>
								<span
									v-if="btnPower.includes(4)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else>
									{{ userInfo.mobile || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.date_of_birth')}`"
							>
								<span
									v-if="btnPower.includes(3)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else>
									{{ userInfo.birthday || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.mailbox')}`"
							>
								<span
									v-if="btnPower.includes(5)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else class="personal-show-info">
									{{ userInfo.email || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.bmh_id')}`"
							>
								<span
									v-if="btnPower.includes(11)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else>
									{{ userInfo.bmhUserId || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.bmh_account')}`"
							>
								<span
									v-if="btnPower.includes(11)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else>
									{{ userInfo.bmhUsername || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('member.yh_account')}`"
							>
								<span
									v-if="btnPower.includes(12)"
									class="personal-apply-color"
								>
									{{ $t('member.under_review') }}
								</span>
								<span v-else>
									{{ userInfo.yhAccountName || '-' }}
								</span>
							</el-descriptions-item>
							<el-descriptions-item
								:label="`${$t('risk.member_withdraw_remark')}`"
							>
								<div class="crypto-wallet-address">
									<span v-if="cryptalWalletAddress">
										{{ cryptalWalletAddress }}
									</span>
									<span v-else>
										-
									</span>
									<span
										v-if="cryptalWallets.length > 0"
										class="cursor-pointer"
										@click="() => {openCrytalWalletAddressModal = true}"
									>
										<span><i class="icon-history el-icon-time"></i></span>
									</span>
									<CrytalWalletAddressModal :userId="userInfo.id" v-if="openCrytalWalletAddressModal" @cancel="() => {openCrytalWalletAddressModal = false}" />
								</div>
							</el-descriptions-item>
						</el-descriptions>
					</el-col>
				</el-row>
			</el-descriptions-item>
		</el-descriptions>

		<!-- <el-divider></el-divider>
		<el-descriptions
			:title="`${$t('member.vip_information')}`"
			:column="3"
			:colon="false"
		>
			<el-descriptions-item :span="2" content-class-name="my-content">
				<ul class="progress-bar">
					<li class="first-li">
						<p>
							{{ $t('member.surplus') }}
						</p>
						<p>&nbsp;</p>
						<p>{{ $t('member.completed') }}</p>
						<p>&nbsp;</p>
					</li>
					<li>
						<p>
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.depositAmountLave
								)
							}}
						</p>
						<el-progress
							:percentage="pepositProgress"
							:stroke-width="12"
							:show-text="false"
						></el-progress>
						<p>
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.depositAmountCurr
								)
							}}/
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.depositAmountTotal
								)
							}}
						</p>
						<p>
							({{ $t('member.upgrade') }}){{
								$t('member.deposit_amount')
							}}
						</p>
					</li>
					<li>
						<p>
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.validBetsLave
								)
							}}
						</p>
						<el-progress
							:percentage="bettingProgress"
							:stroke-width="12"
							:show-text="false"
						></el-progress>
						<p>
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.validBetsCurr
								)
							}}/
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.validBetsTotal
								)
							}}
						</p>
						<p>
							({{ $t('member.upgrade') }}){{
								$t('member.effective_betting')
							}}
						</p>
					</li>
					<li>
						<p>
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.bjValidBetsLave
								)
							}}
						</p>
						<el-progress
							:percentage="relegationProgress"
							:stroke-width="12"
							:show-text="false"
						></el-progress>
						<p>
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.bjValidBetsCurr
								)
							}}/
							{{ handleCurrency(parentData.currency) }}
							{{
								handleNumber(
									parentData.currency,
									vipProgressBarList.bjValidBetsTotal
								)
							}}
						</p>
						<p>
							({{ $t('member.relegation') }}:
							{{ vipProgressBarList.bjValidBetsDate || '-' }}){{
								$t('member.effective_betting')
							}}
						</p>
					</li>
				</ul>
			</el-descriptions-item>
			<el-descriptions-item :span="1">
				<div class="vip-box">
					<span>
						{{ $t('common.vip_level') }}：{{
							vipProgressBarList.grade
						}}
					</span>
					<br />
					<span>
						{{ $t('member.vip_experience') }}：{{
							vipProgressBarList.experience
						}}
					</span>
				</div>
			</el-descriptions-item>
		</el-descriptions> -->
		<el-divider></el-divider>
		<el-descriptions
			:title="`${$t('member.remarks')}`"
			:column="1"
			:colon="false"
			class="mb100"
		>
			<el-descriptions-item content-class-name="my-content">
				<el-table
					v-loading="remarkLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					:data="memberRemarkList"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						align="center"
						type="index"
						:label="`${$t('common.serial_number')}`"
						:width="getWidth('100px')"
					></el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="`${$t('member.update_time')}`"
					></el-table-column>
					<el-table-column
						prop="remark"
						align="center"
						:label="`${$t('member.remarks')}`"
						show-overflow-tooltip
					></el-table-column>
					<el-table-column
						prop="operator"
						align="center"
						:label="`${$t('member.remarks_account_no')}`"
					></el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="page"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="size"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					style="float: right; padding-top: 10px"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import btnListPage from './btn-list-page'
import CrytalWalletAddressModal from './crytal-wallet-address-modal.vue'
export default {
	components: { btnListPage, CrytalWalletAddressModal },
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		userInfo: { type: Object, default: {} },
		btnPower: { type: Array, default: [] }
	},
	data() {
		return {
			checkTypes: {
				0: '无校验',
				1: '身份验证器',
				2: '邮箱校验',
				3: '手机校验'
			},
			// userInfo: {},
			// vipProgressBarList: {},
			// pepositProgress: 0,
			// bettingProgress: 0,
			// relegationProgress: 0,
			remarkLoading: false,
			memberRemarkList: [],
			page: 1,
			size: 100,
			cryptalWallets: [],
			openCrytalWalletAddressModal: false,
			cryptalWalletAddress: null
			// btnPower: []
		}
	},
	watch: {},
	created() {
		// this.query()
		// this.getVipInfo()
		this.getMemberRemark()
	},
	mounted() {
		this.getWalletAddress()
		this.getWalletAddressPage()
	},
	methods: {
		// query() {
		// 	this.$api
		// 		.getOutlineInfo({ ...this.parentData })
		// 		.then((res) => {
		// 			this.btnPower = []
		// 			this.userInfo = res?.data
		// 			const { auditList } = res?.data
		// 			auditList.forEach((ele) => {
		// 				this.btnPower.push(ele.applyType)
		// 			})
		// 		})
		// 		.catch(() => {})
		// },
		// 获取vip信息   并计算进度
		// getVipInfo() {
		// 	this.$api.getVipInfo({ ...this.parentData }).then((res) => {
		// 		this.vipProgressBarList = res?.data || {}
		// 		const {
		// 			depositAmountCurr,
		// 			depositAmountTotal,
		// 			validBetsCurr,
		// 			validBetsTotal,
		// 			bjValidBetsCurr,
		// 			bjValidBetsTotal
		// 		} = res?.data
		// 		if (depositAmountCurr === 0 && depositAmountTotal === 0) {
		// 			this.pepositProgress = 0
		// 		} else {
		// 			const deposit =
		// 				(depositAmountCurr / depositAmountTotal) * 100
		// 			deposit >= 100
		// 				? (this.pepositProgress = 100)
		// 				: deposit >= 0
		// 				? (this.pepositProgress = deposit)
		// 				: (this.pepositProgress = 100)
		// 		}
		// 		if (validBetsCurr === 0 && validBetsTotal === 0) {
		// 			this.bettingProgress = 0
		// 		} else {
		// 			const validBets = (validBetsCurr / validBetsTotal) * 100
		// 			validBets >= 100
		// 				? (this.bettingProgress = 100)
		// 				: validBets >= 0
		// 				? (this.bettingProgress = validBets)
		// 				: (this.bettingProgress = 100)
		//
		// 		if (bjValidBetsCurr === 0 && bjValidBetsTotal === 0) {
		// 			this.relegationProgress = 0
		// 		} else {
		// 			const bjValidBets =
		// 				(bjValidBetsCurr / bjValidBetsTotal) * 100
		// 			bjValidBets >= 100
		// 				? (this.relegationProgress = 100)
		// 				: bjValidBets >= 0
		// 				? (this.relegationProgress = bjValidBets)
		// 				: (this.relegationProgress = 100)
		// 		}
		// 	})
		// },
		getMemberRemark() {
			this.remarkLoading = true
			this.memberRemarkList = []
			this.$api
				.getMemberRemarkList({
					pageNum: this.page,
					pageSize: this.size,
					...this.parentData
				})
				.then((res) => {
					const { record, totalRecord } = res?.data
					this.memberRemarkList = record || []
					this.total = totalRecord || 0
				})
				.catch(() => {})
				.finally(() => {
					this.remarkLoading = false
				})
		},
		getNewUserInfo() {
			this.$api
				.getOutlineInfo({ ...this.parentData })
				.then((res) => {
					this.$emit('setNewUserInfo', res?.data)
				})
				.catch(() => {})
		},
		refresh() {
			this.page = 1
			this.getNewUserInfo()
			// this.query()
			// this.getVipInfo()
			this.getMemberRemark()
		},
		handelDayNum(val) {
			if (val) {
				const lastTime = dayjs(val)
				const nowTime = new Date()
				const day = dayjs(nowTime).diff(lastTime, 'day')
				return day
			} else {
				return '-'
			}
		},
		handleCurrentChange(val) {
			this.page = val
			this.getMemberRemark()
		},
		handleSizeChange(val) {
			this.page = 1
			this.size = val
			this.getMemberRemark()
		},
		async getWalletAddress() {
			const res = await this.$api.getLatestCryptoWalletAddress({userId: this.userInfo.id})

			if (res.code !== 200) return

			this.cryptalWalletAddress = res.data.cryptoWalletAddress
		},
		async getWalletAddressPage() {
			const res = await this.$api.getCryptoWalletAddressPage({userId: this.userInfo.id, page: 1, pageSize: 5})

			this.cryptalWallets = res.data.record
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
	min-width: 90px;
}

::v-deep .my-content {
	width: 100%;
	margin-left: -60px;
	.progress-bar {
		display: flex;
		> li {
			flex: 0.8;
			line-height: 22px;
			margin-right: 40px;
			box-sizing: border-box;
			:nth-child(1),
			:nth-child(3) {
				text-align: right;
			}
			:last-child {
				text-align: center;
			}
		}
		.first-li {
			flex: 0.2;
			margin-right: 0;
			:nth-child(1),
			:nth-child(3) {
				text-align: left;
			}
			:nth-child(2) {
				line-height: 12px;
			}
		}
	}
}

.personal-apply-color {
	color: #e6a23c;
}
.personal-show-info {
	margin-left: -15px;
}

.vip-box {
	padding: 20px 40px;
	line-height: 32px;
	border-left: 1px solid #ccc;
}
.show-avatar-content {
	margin-left: -60px;
}
::v-deep .show-avatar {
	img {
		width: 100%;
		height: 100%;
	}
}

.cursor-pointer {
	cursor: pointer;
}

.crypto-wallet-address {
	display: flex;
	gap: 5px;
	.icon-history {
		font-size: 20px;
	}
}

.el-descriptions-item__content:has(.crypto-wallet-address) {
	display: flex;
	align-items: center;
}
</style>
